<template>
    <div class="ecology">
        <img src="../../static/img/common/hideImg.png" class="hideImg" @click="changeShow">
        <div class="left" v-show="showHide">
            <div class="markBg">
                <div class="title title1" @click="openDeviceWindow(1)">土壤传感器实时数据<i class="threeBar"  title="打开土壤传感器实时数据"></i></div>
                <div class="dataBox">
                    <div class="dataHead dataHeadColor1">
                        <span>指数等级</span>
                        <b v-if="(soilTimeData.conductivity / 1000) >= 0 && (soilTimeData.conductivity / 1000) < 0.8">非盐渍化</b>
                        <b v-else-if="(soilTimeData.conductivity / 1000) >= 0.8 && (soilTimeData.conductivity / 1000) < 1.2">盐渍化</b>
                        <b v-else-if="(soilTimeData.conductivity / 1000) >= 1.2 && (soilTimeData.conductivity / 1000) < 1.6">中度盐土</b>
                        <b v-else-if="(soilTimeData.conductivity / 1000) >= 1.6 && (soilTimeData.conductivity / 1000) < 3.2">重度盐土</b>
                        <b v-else>极重盐土</b>
                    </div>
                    <div class="dataItemBox">
                        <div class="dataItem">
                            <div>
                                <i></i>
                                <span>温度</span>
                            </div>
                            <div style="margin-right: 10px;">
                                <b v-if="soilTimeData.temperature">{{soilTimeData.temperature}}</b>
                                <u v-else>-</u>
                                <span>℃</span>
                            </div>
                        </div>
                        <div class="dataItem">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>土壤盐分</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="soilTimeData.salinity">{{soilTimeData.salinity}}</b>
                                    <u v-else>-</u>
                                    <span>%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dataItemBox">
                        <div class="dataItem">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>湿度</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="soilTimeData.humidity">{{soilTimeData.humidity}}</b>
                                    <u v-else>-</u>
                                    <span>%</span>
                                </div>
                            </div>
                        </div>
                        <div class="dataItem">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>优质天数</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="soilGoodDay">{{soilGoodDay}}</b>
                                    <u v-else>-</u>
                                    <span>天</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lineTitle">
                        <span>近七天土壤盐碱化环境指数等级</span>
                        <div>
                            <span class="emptyLine" style="width: 100px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" width="120px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div id="soilChart" style="width: 360px;height: 142px;"></div>
                </div>
                <hr/>
                <div class="title title1" @click="openDeviceWindow(2)">空气传感器实时数据<i class="threeBar"
                                                      title="打开空气传感器实时数据"></i></div>
                <div class="dataBox">
                    <div class="dataHead dataHeadColor2">
                        <span>指数等级</span>
                        <b v-if="airTimeData.pm25 >= 0 && airTimeData.pm25 < 35">优</b>
                        <b v-else-if="airTimeData.pm25 >= 35 && airTimeData.pm25 < 75">良</b>
                        <b v-else-if="airTimeData.pm25 >= 75 && airTimeData.pm25 < 115">轻度污染</b>
                        <b v-else-if="airTimeData.pm25 >= 115 && airTimeData.pm25 < 150">中度污染</b>
                        <b v-else-if="airTimeData.pm25 >= 150 && airTimeData.pm25 < 250">重度污染</b>
                        <b v-else-if="airTimeData.pm25 >= 250">严重污染</b>
                    </div>
                    <div class="dataItemBox">
                        <div class="dataItem">
                            <div>
                                <i></i>
                                <span>温度</span>
                            </div>
                            <div style="margin-right: 10px;">
                                <b v-if="airTimeData.temperature">{{airTimeData.temperature}}</b>
                                <u v-else>-</u>
                                <span>℃</span>
                            </div>
                        </div>
                        <div class="dataItem">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>PM2.5</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="airTimeData.pm25">{{airTimeData.pm25}}</b>
                                    <u v-else>-</u>
                                    <span>ug/m³</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dataItemBox">
                        <div class="dataItem">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>湿度</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="airTimeData.humidity">{{airTimeData.humidity}}</b>
                                    <u v-else>-</u>
                                    <span>%</span>
                                </div>
                            </div>
                        </div>
                        <div class="dataItem">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>优质天数</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="airGoodDay">{{airGoodDay}}</b>
                                    <u v-else>-</u>
                                    <span>天</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dataItemBox">
                        <div class="dataItem">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>CO2</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="airTimeData.co2">{{airTimeData.co2}}</b>
                                    <u v-else>-</u>
                                    <span>ppm</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lineTitle">
                        <span>近七天空气质量环境指数等级</span>
                        <div>
                            <span class="emptyLine" style="width: 120px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" width="130px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div id="airChart" style="width: 360px;height: 142px;"></div>
                </div>
                <hr/>
                <div class="title title2" @click="openDeviceWindow(3)">负离子传感器实时数据<i class="threeBar" 
                                                       title="打开负离子传感器实时数据"></i></div>
                <div class="dataBox">
                    <div class="dataHead dataHeadColor3">
                        <span>指数等级</span>
                        <b v-if="anionTimeData.tvoc >= 0 && anionTimeData.tvoc < 400">绿地级</b>
                        <b v-else-if="anionTimeData.tvoc >= 400 && anionTimeData.tvoc < 1000">公园级</b>
                        <b v-else-if="anionTimeData.tvoc >= 1000 && anionTimeData.tvoc < 5000">郊野级</b>
                        <b v-else-if="anionTimeData.tvoc >= 5000 && anionTimeData.tvoc < 10000">高山级</b>
                        <b v-else>森林级</b>
                    </div>
                    <div class="dataItemBox">
                        <div class="dataItem">
                            <div>
                                <i></i>
                                <span>负氧离子</span>
                            </div>
                            <div style="margin-right: 10px;">
                                <b v-if="anionTimeData.tvoc">{{anionTimeData.tvoc}}</b>
                                <u v-else>-</u>
                                <span>/cm³</span>
                            </div>
                        </div>
                        <div class="dataItem">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>优质天数</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="tvocGoodDay">{{tvocGoodDay}}</b>
                                    <u v-else>-</u>
                                    <span>天</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lineTitle">
                        <span>近七天负离子环境指数等级</span>
                        <div>
                            <span class="emptyLine" style="width: 120px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" width="140px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div id="anionChart" style="width: 360px;height: 142px;"></div>
                </div>
            </div>
        </div>
        <div class="bottomBox" v-show="showHide">
            <div class="markBg">
                <div class="btBox1">
                    <div class="title title1" @click="openDeviceWindow(4)">水质传感器实时数据<i class="threeBar" title="打开水质传感器实时数据"></i></div>
                    <div class="bt1">
                        <div class="dataHead">
                            <span>指数等级</span>
                            <b v-if="waterTimeData.dissolution >= 0 && waterTimeData.dissolution <= 2">I 类</b>
                            <b v-else-if="waterTimeData.dissolution > 2 && waterTimeData.dissolution <= 3">II 类</b>
                            <b v-else-if="waterTimeData.dissolution > 3 && waterTimeData.dissolution <= 5">III 类</b>
                            <b v-else-if="waterTimeData.dissolution > 5 && waterTimeData.dissolution < 6">IV 类</b>
                            <b v-else>V 类</b>
                        </div>
                        <div class="dataItemBox">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>PH值</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="waterTimeData.ph">{{waterTimeData.ph}}</b>
                                    <u v-else>-</u>
                                    <span></span>
                                </div>
                            </div>
                            <div class="dataItem">
                                <div class="dataItem">
                                    <div>
                                        <i></i>
                                        <span>溶解氧</span>
                                    </div>
                                    <div style="margin-right: 10px;">
                                        <b v-if="waterTimeData.dissolution">{{waterTimeData.dissolution}}</b>
                                        <u v-else>-</u>
                                        <span>mg/l</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dataItemBox">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>温度</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="waterTimeData.temperature">{{waterTimeData.temperature}}</b>
                                    <u v-else>-</u>
                                    <span>℃</span>
                                </div>
                            </div>
                            <div class="dataItem">
                                <div class="dataItem">
                                    <div>
                                        <i></i>
                                        <span>优质天数</span>
                                    </div>
                                    <div style="margin-right: 10px;">
                                        <b v-if="waterGoodDay">{{waterGoodDay}}</b>
                                        <u v-else>-</u>
                                        <span>天</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dataItemBox">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>浊度</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="waterTimeData.turbidity">{{waterTimeData.turbidity}}</b>
                                    <u v-else>-</u>
                                    <span>ntu</span>
                                </div>
                            </div>
                        </div>
                        <div class="dataItemBox">
                            <div class="dataItem">
                                <div>
                                    <i></i>
                                    <span>饱和度</span>
                                </div>
                                <div style="margin-right: 10px;">
                                    <b v-if="waterTimeData.saturability">{{waterTimeData.saturability}}</b>
                                    <u v-else>-</u>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btBox2">
                    <div class="lineTitle">
                        <span>近七天地表水环境质量等级</span>
                        <div>
                            <span class="emptyLine" style="width: 120px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" width="125px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div id="waterSeven" style="width:340px;height: 154px;"></div>
                </div>
                <div class="btBox3">
                    <div class="title title3">雨量传感器实时数据</div>
                    <div class="dataItemBox">
                        <div class="dataItem">
                            <div>
                                <i></i>
                                <span>降雨量</span>
                            </div>
                            <div style="margin-right: 10px;">
                                <b v-if="rainTimeData.number24">{{rainTimeData.number24}}</b>
                                <u v-else>-</u>
                                <span>mm</span>
                            </div>
                        </div>
                    </div>
                    <div class="lineTitle" style="margin-top: -12px;">
                        <span>近七天降雨量等级</span>
                        <div>
                            <span class="emptyLine" style="width: 180px;"></span>
                            <!--<img src="../../static/img/common/dottedLine.png" width="165px;">-->
                            <img src="../../static/img/common/dian.png" class="dian">
                        </div>
                    </div>
                    <div id="rainSeven" style="width:350px;height: 154px;"></div>
                </div>
                <div class="btBox4">
                    <div class="title title4">园区内种植各类型苗木数量</div>
                    <div class="weekDatasTitle">
                        <i></i><span>园林苗木种植数量</span><b v-if="treeNumsData.sum">{{treeNumsData.sum}}</b><u v-else>-</u>
                    </div>
                    <div id="treesNums" style="width: 330px;height: 190px;"></div>
                </div>
            </div>
        </div>
        <div class="left left1" v-show="!showHide">
            <div class="markBg">
                <div class="title title5">各个园区场馆种植苗木数量TOP5</div>
                <div class="weekDatasTitle">
                    <i></i><span>园林苗木种植数量</span><b>{{treeRankNum}}</b>
                </div>
                <div id="treeAll" style="width: 380px;height: 200px;"></div>
                <hr style="margin-top: 10px;"/>
                <div class="title title6" @click="openThingsTable">事件类型分析<i class="threeBar"></i></div>
                <div class="lineTitle">
                    <span>当日事件数据</span>
                    <div>
                        <span class="emptyLine" style="width: 230px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png" width="220px;">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="botCharts">
                    <div id="devicePie" style="width: 352px; height: 150px;"></div>
                    <div class="numStyle numStyle1">{{todayAfNum}}</div>
                    <div class="numStyle numStyle2">件</div>
                    <div class="rateBox rateBox1">
                        <div style="margin-right: 0px;width: 109px;" v-for="(item,index) in todayAfData" :key="index">
                            <div>
                                <b>{{item.number}}</b><u>件</u>
                            </div>
                            <div>
                                <i :class="'icolor' + (index + 1)"></i><span>{{item.gardName}}</span>
                            </div>
                        </div>
                    </div>
                    <!--<div class="rateBox rateBox2">-->
                        <!--<div style="margin-right: 0px;width: 109px;">-->
                            <!--<div>-->
                                <!--<b>25</b><u>件</u>-->
                            <!--</div>-->
                            <!--<div>-->
                                <!--<i class="icolor3"></i><span>水质传感器设备</span>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div style="width: 109px;">-->
                            <!--<div>-->
                                <!--<b>25</b><u>件</u>-->
                            <!--</div>-->
                            <!--<div>-->
                                <!--<i class="icolor4"></i><span>空气传感器设备</span>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                </div>
                <div class="lineTitle">
                    <span>近七天事件数据</span>
                    <div>
                        <span class="emptyLine" style="width: 210px;"></span>
                        <!--<img src="../../static/img/common/dottedLine.png" width="200px;">-->
                        <img src="../../static/img/common/dian.png" class="dian">
                    </div>
                </div>
                <div class="weekDatasTitle">
                    <i></i><span>近七天生态总事件数量</span><b>{{sevenAfToalNum}}</b>
                </div>
                <div id="sevenThings" style="width: 380px;height: 200px;"></div>
            </div>
        </div>

        <!--事件类型分析弹窗 START-->
        <div class="thingWindow" v-show="thingsTable" ref="windowBox">
            <div class="title">当日传感器设备事件分析</div>
            <div class="windowBox clearfix">
                <span class="closeWindow" @click="openThingsTable" title="关闭当日传感器设备事件分析"></span>
                <div class="headTitle">
                    <span>名称</span>
                    <span>类型</span>
                    <span>时间</span>
                    <span>状态</span>
                </div>
                <div class="mainCon" v-for="(item,index) in tableThingsData" :key="index">
                    <span>{{item.affairName}}</span>
                    <span>{{item.typeName}}</span>
                    <span>{{item.affairTime}}</span>
                    <span v-if="item.status == 1 || item.status == 2" class="noHandle">未处理</span>
                    <span v-if="item.status == 3">已处理</span>
                </div>
                <el-pagination
                        layout="prev, pager, next"
                        align="center"
                        @current-change="handleCurrentChange"
                        style="position: absolute;left: 0;bottom: 20px;right: 0;"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!--事件类型分析弹窗 END-->

        <!--各种传导器弹窗 START-->
        <div class="deviceWindow" v-show="deviceShow" ref="windowBox1">
            <div class="title" style="display:block;">传感器数据</div>
            <div class="windowBox clearfix">
                <span class="closeWindow" @click="closeDeviceShow" title="关闭传感器数据"></span>
                <div class="tabs clearfix">
                    <span :class="{ spanActive : spanActive == 3 }" @click="changeDevice(3)">负离子传感器</span>
                    <span :class="{ spanActive : spanActive == 1 }" @click="changeDevice(1)">土壤传感器</span>
                    <span :class="{ spanActive : spanActive == 2 }" @click="changeDevice(2)">空气传感器</span>
                    <span :class="{ spanActive : spanActive == 4 }" @click="changeDevice(4)">水质传感器</span>
                </div>
                <div class="spansDiv clearfix">
                    <span :class="{ spansDivActive : timesActive == 1 }" @click="changeTimes(1)">当日</span>
                    <span :class="{ spansDivActive : timesActive == 2 }" @click="changeTimes(2)">近七天</span>
                    <span :class="{ spansDivActive : timesActive == 3 }" @click="changeTimes(3)">近三十天</span>
                    <b class="fl" v-show="spanActive != 3">/</b>
                    <span :class="{ spansDivActive : stateActive == 1 }" @click="changeState(1)"
                          v-show="spanActive != 3">温度</span>
                    <span :class="{ spansDivActive : stateActive == 2 }" @click="changeState(2)"
                          v-show="spanActive != 3 && spanActive != 4">湿度</span>
                    <span :class="{ spansDivActive : stateActive == 3 }" @click="changeState(3)"
                          v-show="spanActive == 1">土壤盐分</span>
                    <span :class="{ spansDivActive : stateActive == 4 }" @click="changeState(4)"
                          v-show="spanActive == 2">PM2.5</span>
                    <span :class="{ spansDivActive : stateActive == 5 }" @click="changeState(5)"
                          v-show="spanActive == 4">溶氧</span>
                </div>
                <div id="deviceChatrs" style="width: 1385px;height: 300px;margin-top: 5px;"></div>
            </div>
        </div>
        <!--各种传导器弹窗 END-->

        <!-- 点位信息 -->
        <!--        <allin-marker ref="allMarker" :select-arr="selectArr" :select-menu-arr="selectMenu"-->
        <!--                      @setmapdata="setMarake"></allin-marker>-->
        <!-- 点位选择器 -->
        <all-marker ref="allMarker" :map-data="mapData"></all-marker>
    </div>
</template>

<script src="./ecology.js"></script>
<style lang="scss" src="./ecology.scss"></style>